<template>
  <div class="detail">
     <Row>
        <Col span="8">
          <Card>
            <p slot="title">
              <Icon type="android-car"></Icon> 报警详细信息
            </p>
            <div class="contents">
              <div class="works" style="float:left;">
                <span class="workshop">1号锅炉</span> 
                <span class="workshop"><p class="security" style="color:#000;">已经运行</p></span> 
                <span class="workshop"><p class="times"> 24小时</p></span>
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">报警次数 <p class="security runing" style="color: red; padding-left: 10px;">3次</p></span> 
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">气压 <p class="security runing">3.5 (Pa)</p></span> 
                <span class="workshop">安全界限：<p class="times" style="color: red;">< 3.0 (Pa)</p></span>
                <span class="workshop" style="color: red; padding-left: 10px;">气压超标</span>
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">温度 <p class="security runing">75°</p></span> 
                <span class="workshop">安全界限：<p class="times" style="color: red;">60°以下</p></span>
                <span class="workshop" style="color: red; padding-left: 10px;">温度过高</span>
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">水温 <p class="security runing">3.5 (Pa)</p></span> 
                <span class="workshop">安全界限：<p class="times" style="color: red;">60°以下</p></span>
                <span class="workshop" style="color: red; padding-left: 10px;">水温过高</span>
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">气味 <p class="security runing">超标</p></span> 
                <span class="workshop">安全界限：<p class="times" style="color: red;">整洁无异味</p></span>
                <span class="workshop" style="color: red; padding-left: 10px;">气味超标</span>
              </div>
              <div class="works" style="float:left;">
                <span class="workshop">甲醇 <p class="security runing">650kg</p></span> 
                <span class="workshop">安全界限：<p class="times" style="color: red;">低于500kg</p></span>
                <span class="workshop" style="color: red; padding-left: 10px;">甲醇释放超标</span>
              </div>
              <div class="workshop clear">
                <div class="works" style="float:left;margin-bottom:130px;">
                <span style="float: left; height: 30px; line-height: 30px;">建议</span> 
                <ul class="detail_ul">
                  <li>1.立即联系相关人员处置方案(泄压)</li>
                  <li>2.立即降低锅炉温度</li>
                  <li>3.联系相关人员降低水温</li>
                  <li>4.处理锅炉异味</li>
                  <li>5.检查用电情况，确认指标是否正常</li>             
                </ul>
              </div>
              </div>
            </div>
          </Card>
          <Card>
            <p slot="title"><Icon type="person"></Icon> 当前岗位工作人员</p>
            <div class="post">
              <div class="phone"><span class="security">赵大</span> <span>13456765423</span><span>上班/到岗时间:</span> <span class="security">刚刚</span></div>
              <div class="phone"><span class="security">钱二</span> <span>18854198878</span><span>上班/到岗时间:</span> <span class="security">刚刚</span></div>
              <div class="phone"><span class="security">孙三</span> <span>15562758128</span><span>上班/到岗时间:</span> <span class="security">刚刚</span></div>
              <div class="phone"><span class="security">李四</span> <span>15153005188</span><span>上班/到岗时间:</span> <span class="security">1小时前</span></div>
              <div class="phone"><span class="security">周五</span> <span>18615443520</span><span>上班/到岗时间:</span> <span class="security">1小时前</span></div>
              <div class="phone"><span class="security">吴六</span> <span>15545671113</span><span>上班/到岗时间:</span> <span class="security">2小时前</span></div>
              <div class="phone"><span class="security">郑七</span> <span>13451988876</span><span>上班/到岗时间:</span> <span class="security">2小时前</span></div>
              <div class="phone"><span class="security">王八</span> <span>18877773987</span><span>上班/到岗时间:</span> <span class="security">3小时前</span></div>
            </div>
          </Card>
        </Col>
        <Col span="8">
          <Card>
          <img src="static/guandao.jpg" style="width:100%;height:800px;" alt="">
        </Card>
        </Col>
        <Col span="8">
          <Card>
          <Card>
            <p slot="title"  style="color: blue;"><Icon type="image" color="blue"></Icon> 监控</p>
            <img src="http://222.173.11.38:6011/Pages/NMG/EXAM/img/99999.png" width="340" height="180">
          </Card>
          <Card>
            <p slot="title"  style="color: blue;"><Icon type="image" color="blue"></Icon> Dcs压力</p>
            <div class="works">
              <span class="workshop">1号锅炉</span> 
              <span class="workshop">气压  <p class="security">3.5 (Pa)</p></span> 
              <span class="workshop">安全界限 <p class="times" style="padding-left: 10px;"> < 3.0 (Pa)</p></span>
          </div>
          <div class="works">
            <span class="workshop">2号锅炉</span> 
            <span class="workshop">气压  <p class="security">3.5 (Pa)</p></span> 
            <span class="workshop">安全界限 <p class="times" style="padding-left: 10px;"> < 3.0 (Pa)</p></span>
          </div>          
           </Card>
          <Card>
            <p slot="title" style="color: blue;"><Icon type="image" color="blue"></Icon> 监控</p>
            <img src="http://222.173.11.38:6011/Pages/NMG/EXAM/img/99999.png" width="340" height="180">
          </Card>
           <Card>
            <p slot="title"  style="color: blue;"><Icon type="image" color="blue"></Icon> Dcs数据</p>
            <div class="works">
            <span class="workshop">3号锅炉</span> 
            <span class="workshop">气压  <p class="security">3.5 (Pa)</p></span> 
            <span class="workshop">安全界限 <p class="times" style="padding-left: 10px;"> < 3.0 (Pa)</p></span>
          </div>
          <div class="works">
            <span class="workshop">4号锅炉</span> 
            <span class="workshop">气压  <p class="security">3.5 (Pa)</p></span> 
            <span class="workshop">安全界限 <p class="times" style="padding-left: 10px;"> < 3.0 (Pa)</p></span>
          </div>
           </Card>
        </Card>
        </Col>
    </Row>

  </div>
</template>

<script>
export default {
};
</script>

<style>
  .detail_ul li {
    text-align: left;
  }
  .detail .clear:after {
    content:'';
    display:block;
    clear:both;
    height:0;
    overflow:hidden;
    visibility:hidden;
  }
  .detail .works {
    line-height: 40px;
    height: 40px;
  }
  .detail .workshop {
    margin: 0 10px;
  }
  .detail .workshop ul {
    float: left;
    padding-left: 25px;
  }
  .detail .workshop ul li {
    height: 30px;
    line-height: 30px;
    color: rgba(0, 0, 0, .5);
  }
  .detail .security {
    color: #19be6b;
    display: inline-block;
  }
  .detail .error {
  }
  .detail .workshop .runing {
    padding-left: 15px;
  }
  .detail .workshop .times {
    color: red;
    display: inline;
  }
  .detail .work {
    width: 50%;
  }
  .detail .work .contents {
    padding: 16px 160px;
    text-align: left;
  }
  .phone, .duty {
    height: 30px;
    line-height: 30px;
  }
  .detail .fl {
    float: left;
  }
  .detail .fr {
    float: right;
  }
  .detail .person {
    width: 50%;
  }
   .detail post {
     padding: 10px;
   }
   .post .phone>span{
     display: inline-block;
   }
   .post .phone>span:nth-last-of-type(1),.post .phone>span:nth-last-of-type(4){
     width: 18%;
   }
   .post .phone>span:nth-last-of-type(2),.post .phone>span:nth-last-of-type(3){
     width: 30%;
   }
</style>
